<template>
    <view class="content">
        <view class="container">
            <view style="padding-bottom: 10px;position: sticky;z-index: 99;top: 0;background: #f1f1f1">
                <!-- 顶部切换标签 -->
                <view class="tab-container">
                    <text :class="{'active-tab': currentTab === 0}" @click="changeTab(0)">即将过期</text>
                    <text :class="{'active-tab': currentTab === 1}" @click="changeTab(1)">已过期</text>
                </view>
                <!-- 搜索框 -->
                <view class="search-container">
                    <input type="text" class="search-input" v-model="searchName" placeholder="请输入设备名称"/>
                    <button class="search-button" @click="searchExpire()">搜索</button>
                </view>
            </view>
            <view class="container">
                <view class="alert-list" v-if="currentTab===0">
                    <view v-for="data in tableData1" :key="data.id" class="card" @click="navigateToPage(data)">
                        <view class="card-header">
                            <view class="title">{{ data.equipmentName }}</view>
                            <view class="status" :class="currentTab === 0 ? 'success' : 'warning'">
                                即将过期
                            </view>
                        </view>
                        <view class="card-body">
                            <view class="info-row">
                                <view class="icon-box">
                                    <uni-icons type="info" size="24" color="#666"/>
                                </view>
                                <text class="info-text">设备序列号：{{data.equipmentId}}</text>
                            </view>
                            <view class="info-row">
                                <view class="icon-box">
                                    <uni-icons type="home" size="24" color="#666"/>
                                </view>
                                <text class="info-text">{{data.address}}</text>
                            </view>
                            <view class="info-row">
                                <view class="icon-box">
                                    <uni-icons type="calendar" size="24" color="#666"/>
                                </view>
                                <text class="info-text">过期时间：{{ data.endTime }}</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="alert-list" v-if="currentTab===1">
                    <view v-for="data in tableData2" :key="data.id" class="card" @click="navigateToPage(data)">
                        <view class="card-header">
                            <view class="title">{{ data.equipmentName }}</view>
                            <view class="status" :class="currentTab === 0 ? 'success' : 'warning'">
                                已过期
                            </view>
                        </view>
                        <view class="card-body">
                            <view class="info-row">
                                <view class="icon-box">
                                    <uni-icons type="info" size="24" color="#666"/>
                                </view>
                                <text class="info-text">设备序列号：{{data.equipmentId}}</text>
                            </view>
                            <view class="info-row">
                                <view class="icon-box">
                                    <uni-icons type="home" size="24" color="#666"/>
                                </view>
                                <text class="info-text">{{data.address}}</text>
                            </view>
                            <view class="info-row">
                                <view class="icon-box">
                                    <uni-icons type="calendar" size="24" color="#666"/>
                                </view>
                                <text class="info-text">过期时间：{{ data.endTime }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import request from '@/util/request';

    export default {
        data() {
            return {
                currentTab: 0,
                tableData1: [],
                tableData2: [],
                searchName: '',
                pageNum: 1,
                pageSize: 10,
                total: 0,
            };
        },
        mounted() {
            this.load();
            this.overload();
        },
        onPullDownRefresh() {
            this.pageNum = 1;
            this.pageSize = 10;
            this.searchExpire()
            uni.stopPullDownRefresh();
        },
        onReachBottom() { //触底事件
            if (this.pageNum * this.pageSize >= this.total) {
                uni.showToast({
                    title: '没有更多数据了',
                    icon: 'none',
                    duration: 1000
                });
            } else {
                uni.showLoading({
                    title: '加载中'
                });
                this.pageSize += 10
                this.searchExpire()
                setTimeout(() => {
                    uni.hideLoading()
                }, 500)
            }
        },
        methods: {
            changeTab(index) {
                this.currentTab = index;
                this.searchText = ""
                this.searchExpire()
            },
            touchStart(event) {
                this.startX = event.touches[0].clientX;
            },
            touchMove(event) {
                const moveX = event.touches[0].clientX;
                const distance = this.startX - moveX;

                // 处理滑动逻辑
                if (distance > 100) {
                    this.changeTab(1); // 向左滑动切换到历史报警
                } else if (distance < -100) {
                    this.changeTab(0); // 向右滑动切换到当前报警
                }
            },
            searchExpire() {
                if (this.currentTab === 0) {
                    this.load();
                } else if (this.currentTab === 1) {
                    this.overload();
                }
            },
            load() {
                let level = this.$store.state.userInfo.level;
                let organizationId = this.$store.state.userInfo.organization;
                let isAllClient = this.$store.state.userInfo.isAllClient;
                let clientIds;
                if (isAllClient === "1") {
                    clientIds = this.$store.state.userInfo.clientIds;
                } else {
                    clientIds = [];
                }
                request.get("/equipment-input-store/pageExpire?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&organizationId=" + organizationId +
                    "&level=" + level + "&isAllClient=" + isAllClient + "&clientIds=" + clientIds + "&isExpire=" + 0 + "&equipmentName=" + this.searchName).then(res => {
                    if (res.code === '200') {
                        for (let key in res.data) {
                            if (key === "record") {
                                this.tableData1 = res.data[key];
                            } else if (key === "total") {
                                this.total = res.data[key];
                            }
                        }
                    }
                })
            },
            overload() {
                let level = this.$store.state.userInfo.level;
                let organizationId = this.$store.state.userInfo.organization;
                let isAllClient = this.$store.state.userInfo.isAllClient;
                let clientIds;
                if (isAllClient === "1") {
                    clientIds = this.$store.state.userInfo.clientIds;
                } else {
                    clientIds = [];
                }
                request.get("/equipment-input-store/pageExpire?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&organizationId=" + organizationId +
                    "&level=" + level + "&isAllClient=" + isAllClient + "&clientIds=" + clientIds + "&isExpire=" + 1 + "&equipmentName=" + this.searchName).then(res => {
                    if (res.code === '200') {
                        for (let key in res.data) {
                            if (key === "record") {
                                this.tableData2 = res.data[key];
                            } else if (key === "total") {
                                this.total = res.data[key];
                            }
                        }
                    }
                })
            },
            navigateToPage(item) {
                var objStr = JSON.stringify(item);
                uni.navigateTo({
                    url: '/pages/equipment/particular?equipment=' + objStr,
                });
            },
        }
    }
</script>

<style scoped>
    @import url("../../common/globleCSS/card.css");

    .container {
        padding: 0rpx;
    }

    :deep(.is-active) {
        color: var(--blue-color);
    }

    :deep(.wd-tabs__line) {
        width: 20%;
        background: var(--blue-color);
    }

    .content {
        background-color: var(--bg-color);
    }

    .tab-container {
        display: flex;
        justify-content: space-around;
        background-color: #f8f8f8;
        padding: 10px 0;
    }

    .active-tab {
        color: #007aff;
        font-weight: bold;
    }

    .alert-list {
        margin: 0 20rpx 20rpx 20rpx;
    }

    .search-container {
        /*margin-top: 10px;*/
        margin: 10px 15px 0px 15px;
        height: 40px;
        display: flex;
        align-items: center;
        background-color: #f8f8f8;
        border-radius: 10rpx;
    }

    .search-input {
        flex: 1;
        height: 40px;
        font-size: 16px;
        padding: 0 10px;
        border: 1px solid #ddd;
        border-radius: 5rpx;
    }

    .search-button {
        margin-left: 10px;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        color: #fff;
        background-color: var(--blue-color);
        border-radius: 5rpx;
    }

    .success {
        background-color: #c4b436;
    }
</style>
